feat: add logging for blocked updates when beforeunload is cancelled#5574
feat: add logging for blocked updates when beforeunload is cancelled#5574nakjun12 wants to merge 6 commits intowebpack:mainfrom
Conversation
- Add beforeunload-hmr-fallback: Tests bug when HMR fails and falls back to reload - Add beforeunload-live-reload: Tests bug when liveReload is enabled Both examples demonstrate the isUnloading flag getting stuck after canceling the "Leave site?" dialog, blocking subsequent updates.
Log when reload is prevented during beforeunload to help developers diagnose why hot module replacement or live reload isn't working.
| ### Expected vs Actual Behavior | ||
|
|
||
| **Expected**: After canceling dialog, file changes should still trigger page updates | ||
| **Actual**: Page updates are completely blocked until manual refresh |
There was a problem hiding this comment.
Why we need this example?
There was a problem hiding this comment.
I initially added this example while working on the improvements, but I kept it because it clearly demonstrates the problem I was experiencing and helps with understanding the issue.
There was a problem hiding this comment.
Do you want to fix the problem, not just logging?
There was a problem hiding this comment.
Yes, I tried various approaches but concluded that logging would be sufficient for now.
Would you have any suggestions for a better approach?
There was a problem hiding this comment.
Unfortunately I don't think it can be fixed here, if you have logic beforeunload you need to do it manually refresh the page
There was a problem hiding this comment.
I understand.
I think logging alone would help developers understand why HMR stops working.
I'll remove the examples. Would that be okay?
There was a problem hiding this comment.
Let's make only one example and provide lines how to fix it (i.e. reloading) - adding comment in code and in readme (in example)
There was a problem hiding this comment.
I've updated the example as you suggested.
I changed the log level to warn and the message to recommend page refresh.
- Remove duplicate examples and create single unified example demonstrating HMR/Live Reload blocking issue.
For Bugs and Features; did you add new tests?
I have added a new example to manually reproduce this bug and verify the logging behavior.
Motivation / Use-Case
This PR adds logging to help developers identify when
webpack-dev-serverignores HMR and live reload updates after canceling thebeforeunloadconfirmation dialog.The Problem:
When users cancel the browser's "Leave site?" dialog, the internal
isUnloadingstate gets stuck astrue, silently blocking all subsequent HMR updates.Common Scenarios:
beforeunloadevents when opening files in VSCodeWhy This Matters:
Most developers don't realize their updates are being blocked because there's no visible indication. This creates a silent workflow disruption that can be frustrating to diagnose.
Solution:
This PR adds informative logging to make the blocking behavior visible, helping developers understand when and why their updates are being ignored.
Fixes #5571
Proposed Solutions
This PR improves debugging through logging.
I've also explored several approaches to address the root cause and would welcome maintainer feedback on implementation.
Background: I tried using various browser events and
setTimeoutapproaches, but couldn't find reliable indicators for when unload is cancelled.These proposals consider the discussion in #841.
Option 1: Configuration Control
Let users disable this feature when it disrupts their workflow.
Option 2: Auto Reset State
Reset
isUnloadingtofalseimmediately after blocking one reload to prevent permanent blocking.Option 3: Conditional Listener
Only enable
beforeunloadlistener whenliveReload: true, since HMR doesn't need full page reloads.